<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>水平定义列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<!--
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/

根据显示的屏幕宽度自动调整样式定义

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号
-->
<body>
    <dl class="dl-horizontal">
        <dt>W3cplus</dt>
        <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
        <dt>慕课网</dt>
        <dd>一个专业的，真心实意在做培训的网站</dd>
        <dt>我来测试一个标题，我来测试一个标题</dt>
        <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
    </dl>

    <!--下面是代码任务部分-->
    <dl class="dl-horizontal">
         <dt>标题一:</dt>
         <dd>描述内容</dd>
         <dt>标题二:</dt>
         <dd>描述内容</dd>
    </dl>
</body>
</html>